<template>
	<view class="main-container" style="display: flex;width: 100%;height: 100vh; box-sizing: border-box;">
		<!-- 左侧导航栏 -->
		<view class="nav-sidebar" :class="{ 'nav-sidebar-grid': !showMenuText }" style="height: 100vh;">
			<view class="logo-box" v-if="showMenuText" style="width: 220px; height: 60px;">
				<image src="/static/1.png" mode="aspectFit" class="logo"></image>
				<text class="title">悦玺云商</text>
			</view>

			<!-- 导航菜单 -->
			<scroll-view scroll-y class="menu-scroll">
				<view v-for="(menu, index) in menus" :key="index" class="menu-item">
					<!-- 一级菜单 -->
					<view class="menu-title" @click="toggleSubmenu(index)">
						<view>
							<uni-icons :type="menu.icon" size="16" color="#fff"></uni-icons>
							<text v-if="showMenuText"
								style="margin-left: 5px; font-size: small;">{{ menu.title }}</text>
						</view>
						<uni-icons v-if="showMenuText" type="right" size="12" color="#fff"
							:class="{ 'arrow-down': menu.isOpen }"></uni-icons>
					</view>
					<template v-if="showMenuText">
						<!-- 二级菜单 -->
						<view class="submenu" v-show="menu.isOpen">
							<view v-for="(sub, subIndex) in menu.children" :key="subIndex" class="submenu-item"
								:class="{ 'active': currentMenu === sub.title }" @click="navigate(sub)">
								<text style="font-size: small;">{{ sub.title }}</text>
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>

		<!-- 右侧内容区 -->
		<view class="content-container">
			<view class="header" style="height: 60px;">
				<view class="breadcrumb">
					<uni-icons type="list" size="32" class="grid-icon"
						@click="showMenuText = !showMenuText"></uni-icons>
				</view>
				<view class="user-info">
					<view class="user-dropdown" @click.stop="toggleUserMenu">
						<image :src="sConf?.auth?.attrs?.face || '/static/logo.png'" mode="aspectFit"
							style="width: 40px; height: 40px;border-radius: 15%;">
						</image>

						<uni-badge :text="sConf?.auth?.admin?.is_super?'root':''" absolute="rightTop"
							:offset="[-10,12]">
							<text class="username">{{ sConf?.auth?.attrs?.nicename || '管理员' }}</text>
						</uni-badge>

						<!-- 
						<uni-icons type="flag" size="24" style="color: #f0ad4e;"
							v-if="sConf?.auth?.admin?.is_super"></uni-icons>
						-->

						<uni-icons type="down" size="14" :class="{ 'arrow-up': showUserMenu }"
							style="margin-left: 50px;"></uni-icons>

						<!-- 下拉菜单 -->
						<view class="dropdown-menu" v-show="showUserMenu" @click.stop>
							<view class="menu-item" @click="handleProfile">
								<uni-icons type="person" size="16"></uni-icons>
								<text>个人信息</text>
							</view>
							<view class="menu-item" @click="handlePassword">
								<uni-icons type="locked" size="16"></uni-icons>
								<text>修改密码</text>
							</view>
							<view class="divider"></view>
							<view class="menu-item logout" @click="handleLogout">
								<uni-icons type="upload" size="16" style="transform: rotate(-90deg);"></uni-icons>
								<text>退出登录</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="nav-tabs"
				style="display: flex; justify-content: start; align-items: center;padding: 20rpx 20rpx 0 20rpx;">
				<template v-for="(tag_page, tag_index) in pages" :key="tag_index">
					<view class="nav-tab" :class="{ 'nav-cur': currentIndex === tag_index }"
						style="padding: 5px 10px;display: flex;align-items: center;justify-content: start;">
						<text @click="navigate(tag_page)"
							style="margin: 0 15px;font-size: smaller;">{{ tag_page.title }}</text>
						<template v-if="tag_page.title !== '首页'">
							<uni-icons class="nav-close" type="closeempty" size="16"
								@click="removePage(tag_index)"></uni-icons>
						</template>
					</view>
				</template>
			</view>

			<!-- 使用swiper组件 -->
			<swiper class="main-content" :current="currentIndex" :disable-touch="true">
				<!--
				<swiper-item>
					<scroll-view scroll-y class="scroll-container" @touchmove.stop @touchstart.stop>
						<sub-index-index @logout="logout"></sub-index-index>
					</scroll-view>
				</swiper-item>
				-->
				<swiper-item v-for="(page, index) in pages" :key="index">
					<scroll-view :scroll-y="false" class="scroll-container" @touchmove.stop @touchstart.stop>
						<component :is="page.component" :data="page.kwargs" @logout="logout"
							@subTabChange="subTabChange"></component>
					</scroll-view>
				</swiper-item>

			</swiper>

		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import subIndexIndex from '@/components/sub-index-index/sub-index-index.vue'
	import subGoodsModel from '@/components/sub-goods-model/sub-goods-model.vue'
	import subGoodsProductVue from '@/components/sub-goods-product/sub-goods-product.vue'
	import subStaffList from '@/components/sub-staff-list/sub-staff-list.vue'
	import subAdminList from '@/components/sub-admin-list/sub-admin-list.vue'
	import subPlaceList from '@/pages/place/sub-place-list.vue'
	import subCargoModeVue from '@/pages/cargo/sub-cargo-mode.vue'
	import subGoodsSpuVue from '@/pages/goods/sub-goods-spu.vue';
	import orderMainVue from '@/pages/order/order-main.vue'
	import subStaffMainVue from '@/pages/staff/sub-staff-main.vue'
	import chainMainVue from '@/pages/chain/chain-main.vue'
	import swiperGoodsInfoVue from '@/pages/goods/swiper-goods-info.vue'
	import subChainMsgVue from '@/pages/chain/sub-chain-msg.vue'
	import subStaffGroupVue from '@/pages/staff/sub-staff-group.vue'
	import subStaffCardsVue from '@/pages/staff/sub-staff-cards.vue'
	import subStaffNameVue from '@/pages/staff/sub-staff-name.vue'
	import subStaffBankVue from '@/pages/staff/sub-staff-bank.vue'
	import subStaffDrawVue from '@/pages/finance/sub-staff-draw.vue'
	import cfgStaffLevelVue from '@/pages/conf/cfg-staff-level.vue'
	import subQywxListVue from '@/pages/qywx/sub-qywx-list.vue'
	import subGoodsSkuVue from '@/pages/goods/sub-goods-sku.vue'
	import wxappCfgListVue from '@/pages/wxapp/wxapp-cfg-list.vue'
	import wxappIsoListVue from '@/pages/wxapp/wxapp-iso-list.vue';
	import wxappCityListVue from '@/pages/wxapp/wxapp-city-list.vue';
	import wxappTuanListVue from '@/pages/wxapp/wxapp-tuan-list.vue';
	import indexLevelModeVue from '@/pages/conf/index-level-mode.vue';


	import subGoodsMainVue from '@/pages/goods/sub-goods-main.vue';
	import psMethod from '@/common/psMethod'
	export default {
		components: {
			subGoodsMainVue,
			subIndexIndex,
			subGoodsModel,
			subGoodsProductVue,
			subStaffList,
			subAdminList,
			subPlaceList,
			subCargoModeVue,
			subGoodsSpuVue,
			orderMainVue,
			subStaffMainVue,
			chainMainVue,
			swiperGoodsInfoVue,
			subChainMsgVue,
			subStaffGroupVue,
			subStaffCardsVue,
			subStaffNameVue,
			subStaffBankVue,
			subStaffDrawVue,
			cfgStaffLevelVue,
			subQywxListVue,
			subGoodsSkuVue,
			wxappCfgListVue,
			wxappIsoListVue,
			wxappCityListVue,
			wxappTuanListVue,
			indexLevelModeVue
		},
		data() {
			return {
				sConf: getApp().globalData,
				showMenuText: true,
				showUserMenu: false,
				curSubTab: 0, // 默认子页面
				// 页面配置
				currentIndex: 0,
				currentMenu: '首页',
				// currentPath: '/components/sub-index-index/sub-index-index',
				pages: [{
					path: '/components/sub-index-index/sub-index-index',
					component: 'subIndexIndex',
					title: '首页'
				}],
				menus: [{
						title: '商户管理',
						icon: 'shop',
						isOpen: false,
						children: [{
							title: '商户列表',
							path: '/pages/place/sub-place-list.vue',
							component: 'subPlaceList'
						}, ]
					},
					{
						title: '商品管理',
						icon: 'gift',
						isOpen: false,
						children: [
							// {
							// 	title: '商品分类',
							// 	path: '/components/sub-goods-model/sub-goods-model',
							// 	component: 'subGoodsModel'
							// },
							// {
							// 	title: '商品列表',
							// 	path: '/components/sub-goods-product/sub-goods-product',
							// 	component: 'subGoodsProductVue'
							// },
							{
								title: '商品分类',
								path: '/pages/cargo/sub-cargo-mode.vue',
								component: 'subCargoModeVue'
							}, {
								// 	title: '商品SPU',
								// 	path: '/pages/goods/sub-goods-main.vue',
								// 	component: 'subGoodsMainVue'
								// }, {
								title: '商品SPU',
								path: '/pages/goods/sub-goods-spu.vue',
								component: 'subGoodsSpuVue'
								// }, {
								// 	title: '商品SKU',
								// 	path: '/pages/goods/sub-goods-sku.vue',
								// 	component: 'subGoodsSkuVue'
							}
						]
					},
					{
						title: '订单管理',
						icon: 'cart',
						isOpen: false,
						children: [{
								title: '订单列表',
								path: '/pages/order/order-main',
								component: 'orderMainVue'
							},
							{
								title: '订单统计',
								path: '/order/statistics'
							}
						]
					},
					{
						title: '用户管理',
						icon: 'staff',
						isOpen: false,
						children: [{
								title: '用户列表',
								path: '/pages/staff/sub-staff-main.vue',
								component: 'subStaffMainVue'
							}, {
								title: '实名认证',
								path: '/pages/staff/sub-staff-name.vue',
								component: 'subStaffNameVue'
							}


							// , {
							// 	title: '用户团队',
							// 	path: '/pages/staff/sub-staff-group.vue',
							// 	component: 'subStaffGroupVue'
							// }, {
							// 	title: '用户卡券',
							// 	path: '/pages/staff/sub-staff-cards.vue',
							// 	component: 'subStaffCardsVue'
							// }, ,
						]
					}, {
						title: '甄新汇选',
						icon: 'pyq',
						isOpen: false,
						children: [{
							title: '产品列表',
							path: '/pages/chain/chain-main.vue',
							component: 'chainMainVue'
						}, {
							title: '消息通知',
							path: '/pages/chain/sub-chain-msg.vue',
							component: 'subChainMsgVue'
						}]
					}, {
						title: '微信小程序',
						icon: 'weixin',
						isOpen: false,
						children: [{
							title: '页面设置',
							path: '/pages/wxapp/wxapp-cfg-list.vue',
							component: 'wxappCfgListVue'
						}, {
							title: '悦玺严选',
							path: '/pages/wxapp/wxapp-iso-list.vue',
							component: 'wxappIsoListVue'
						}, {
							title: '悦玺同城',
							path: '/pages/wxapp/wxapp-city-list.vue',
							component: 'wxappCityListVue'
						}, {
							title: '悦玺团购',
							path: '/pages/wxapp/wxapp-tuan-list.vue',
							component: 'wxappTuanListVue'
						}]
					},
					{
						title: '会员权益',
						icon: 'vip',
						isOpen: false,
						children: [{
							title: '用户权益配置',
							path: '/pages/conf/cfg-staff-level.vue',
							component: 'cfgStaffLevelVue'
						}, {
							title: '权益模板',
							path: '/pages/conf/index-level-mode.vue',
							component: 'indexLevelModeVue'
						}, ]
					},
					{
						title: '财务模块',
						icon: 'wallet',
						isOpen: false,
						children: [{
							title: '用户提现申请',
							path: '/pages/finance/sub-staff-draw.vue',
							component: 'subStaffDrawVue'
						}]
					},
					{
						title: '系统设置',
						icon: 'gear',
						isOpen: false,
						children: [{
								title: '管理员列表',
								path: '/components/sub-admin-list/sub-admin-list',
								component: 'subAdminList'
							},
							{
								title: '企业微信',
								path: '/pages/qywx/sub-qywx-list.vue',
								component: 'subQywxListVue',

							}
						]
					}
				]
			}
		},
		onLoad() {
			let auth = psMethod.syncHasLoginToken()
			if (auth) {
				this.sConf.auth = auth
			} else {
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}

			// 加载窗口
			let subnav = uni.getStorageSync('subnav');
			if (subnav) {
				this.pages = subnav;
			}
			let curTab = uni.getStorageSync('curTab');
			if (curTab) {
				console.log('curTab', curTab);
				this.currentIndex = curTab;
				// this.filterSubTab()
			}

			// 创建全局监听注销
			uni.$on('logout', () => {
				uni.removeStorageSync('proof');
				uni.removeStorageSync('subnav');
				uni.removeStorageSync('curTab');
				uni.removeStorageSync('curSubTab');
				uni.reLaunch({
					url: '/pages/login/login'
				});
			})
			// 监听商品详情页面
			uni.$on('productInfo', (e) => {
				let name = e ? e.name.slice(0, 5) + '...' : '新增商品'
				let path = {
					title: name,
					path: '/pages/goods/swiper-goods-info.vue',
					component: 'swiperGoodsInfoVue',
					kwargs: {
						product: e
					}
				}
				this.navigate(path)
			})
		},
		onUnload() {
			// 卸载全局监听
			uni.$off('logout')
		},
		onShow() {
			console.log('Show index')

		},
		onHide() {
			console.log('Hide index')
		},
		provide() {
			return {
				localPages: this.curSubTab
			}
		},
		methods: {
			// 切换子菜单显示状态
			toggleSubmenu(index) {
				console.log('toggleSubmenu', index);
				this.menus[index].isOpen = !this.menus[index].isOpen;
			},
			// 导航到指定页面
			navigate(path) {
				console.log('navigate');
				const index = this.pages.findIndex(p => p.title === path.title);
				if (index === -1) {
					// 添加新页面
					this.pages.push(path);
					// 切换到新页面
					this.$nextTick(() => {
						this.currentIndex = this.pages.length - 1;
						uni.setStorageSync('subnav', this.pages);
					});
				} else {
					this.currentIndex = index;
				}
				this.currentPath = path.path;
				this.currentMenu = path.title;
				// uni.setStorageSync('curTab', this.currentIndex);
				// this.filterSubTab()
			},
			// 移除页面
			removePage(index) {
				if (index > 0 && index < this.pages.length) {
					const page = this.pages[index];
					this.pages.splice(index, 1);
					// 如果删除的是当前页面，切换到上一页
					if (this.currentIndex === index) {
						this.currentIndex = index - 1;
					} else if (this.currentIndex > index) {
						this.currentIndex--;
					}
					uni.setStorageSync('subnav', this.pages);
					// uni.setStorageSync('curTab', 0);
					// uni.setStorageSync('curSubTab', 0);
				}
			},
			/**
			 * 子组件切换
			 */
			subTabChange(e) {
				console.log('subTabChange', e);
				this.pages[this.currentIndex].subTab = e;
				uni.setStorageSync('subnav', this.pages);
			},
			/**
			 * 当前子组件页面
			 */
			filterSubTab() {
				console.log('filterSubTab');
				this.curSubTab = this.pages[this.currentIndex].subTab || 0
			},
			// 切换用户菜单显示状态
			toggleUserMenu() {
				console.log('toggleUserMenu');
				this.showUserMenu = !this.showUserMenu;
			},
			handleProfile() {
				console.log('handleProfile');
				uni.showToast({
					title: '暂未开放'
				})
			},
			handlePassword() {
				console.log('handlePassword');
				uni.showToast({
					title: '暂未开放'
				})
			},
			handleLogout() {
				console.log('handleLogout');
				this.sConf.auth = null;
				psMethod.syncRemoveLoginToken()
			},
			// 强制注销
			logout() {
				console.log('logout');
				this.sConf.auth = null;
				psMethod.syncRemoveLoginToken()
			},
			// 页面切换回调
			handleSwiperChange(e) {
				console.log('handleSwiperChange', e);
			},

		}
	}
</script>

<style lang="scss">
	.nav-sidebar {
		// width: 220px;
		background-color: #304156;
		color: #fff;

		.logo-box {
			padding: 0 10px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #1f2d3d;

			.logo {
				width: 40px;
				height: 40px;
			}

			.title {
				margin-left: 10px;
				font-size: 16px;
				font-weight: bold;
			}
		}

		.menu-scroll {
			height: calc(100vh - 61px);
		}

		.menu-item {
			.menu-title {
				padding: 12px 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;

				&:hover {
					background-color: #263445;
				}

				.u-icon {
					margin-right: 10px;
				}

				.arrow-down {
					transform: rotate(90deg);
				}
			}

			.submenu {
				background-color: #1f2d3d;

				.submenu-item {
					padding: 10px 20px 10px 45px;
					cursor: pointer;

					&:hover {
						background-color: #001528;
					}

					&.active {
						background-color: #1890ff;
					}
				}
			}
		}
	}

	.nav-sidebar-grid {
		width: 60px;
	}

	/* 右边部分 */
	.content-container {
		flex: 1;
		display: flex;
		flex-direction: column;

		.header {
			height: 60px;
			background-color: #fff;
			border-bottom: 1px solid #f0f0f0;
			padding: 0 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.breadcrumb {
				font-size: 16px;
				color: #666;
			}

			.user-info {
				position: relative;

				.user-dropdown {
					display: flex;
					align-items: center;
					gap: 10px;
					padding: 5px 10px;
					cursor: pointer;
					border-radius: 4px;

					&:hover {
						background-color: #f5f5f5;
					}

					.username {
						font-size: 14px;
						color: #333;
					}

					.arrow-up {
						transform: rotate(180deg);
					}
				}

				.dropdown-menu {
					position: absolute;
					top: 100%;
					right: 0;
					width: 160px;
					background-color: #fff;
					box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
					border-radius: 4px;
					padding: 5px 0;
					z-index: 999;

					.menu-item {
						display: flex;
						align-items: center;
						gap: 10px;
						padding: 10px 15px;
						font-size: 14px;
						cursor: pointer;

						&:hover {
							background-color: #f5f5f5;
						}

						&.logout {
							color: #ff4d4f;
						}
					}

					.divider {
						height: 1px;
						background-color: #f0f0f0;
						margin: 5px 0;
					}
				}
			}
		}

		.main-content {
			flex: 1;
			background-color: #f0f2f5;
		}

		.scroll-container {
			height: 100%;
			padding: 0px;
			box-sizing: border-box;
		}
	}

	/* 其他 
:deep(.uni-swiper-wrapper) {
	pointer-events: none;
}
*/

	.nav-sidebar-grid {
		width: 50px;
	}

	.grid-icon {
		padding: 10rpx;
	}

	.grid-icon:hover {
		background-color: #eee;
	}

	.nav-tab {
		background-color: #fefefe;
		clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
	}

	.nav-cur {
		background-color: #eee;
	}

	.nav-close:hover {
		color: #fff;
		background-color: $uni-color-error;
	}



	.dialog-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 4px;

		.dialog-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 20px;
			padding-bottom: 10px;
			border-bottom: 1px solid #f0f0f0;
		}

		.dialog-footer {
			margin-top: 20px;
			display: flex;
			justify-content: flex-end;
			gap: 10px;
		}
	}
</style>